<template>
	<view class='page'>
		<bwSwiper class='swiper-box' :swiperList="show_data.goods_photos" indicatorActiveColor="#ff0000" imageKey="original" :interval="interval" style="width:100%" @ended="ended"> </bwSwiper>
		<!--价格详情  -->
		<view class="product-info-wrap">
			<text class="product-name">{{show_data.goods_name}}</text>
			<view class="product-price-wrap">
				享宝金￥<text class="price">{{goods_price}}</text>
				<text class="stock">库存：{{goods_number}}</text>
			</view>
			<view class="product-info2">
				<text>已售：{{show_data.sales_sum}}</text>
			</view>
		</view>
		<view class="area-container weight_type" :style="{'display': weight_type == '1' ? 'block' : 'none'}">
			价格类型:<text class="weight_css">价格=今日金价*金重</text>
		</view>
		
		<!--珠宝属性  -->
		<view class="area-container">
			<view class="product-param-item" v-for="(item, index) in attribute" :key="index">
				<text class="product-param-name">{{index}}</text>
				<view class="product-param-val-wrap">
					<view class="product-param-val" :class="value.selected" :data-index="index" @tap.stop="" :data-key="value.index" :data-item-id="key" @tap='choose_item' v-for="(value, key) in item" :key="key">{{value.attr_name}}</view>
				</view>
			</view>
			
			<!-- 规格数量 -->
			<view class="product-param-item">
				<text class="product-param-name">数量</text>
				<view class="product-param-val-wrap">
					<input class="product-number" type="number" v-model="buy_number" @blur="numberInput" />
					<view class="plus product-param-btn" @tap='handle_buy_number' data-act='add'>+</view>
					<view class="mius product-param-btn" @tap='handle_buy_number' data-act='reduce'>-</view>
				</view>
			</view>
			
			<view class="product-param-item attr_content" @tap="show_attr">
				<text class="product-param-name">参数</text>
				<view class="product-param-val-wrap">
					<view class="attr_data">
						<text class="attr_data_one" style="color: #666;" v-for="(item, index) in content_attribute" :key="index" v-if="item.name != null">{{item.name}}</text>
					</view>
					<image class="goRight" src="../../static/icons/jewel/goRight.png"></image>
				</view>
			</view>
		</view>
		
		<view class='area-container'>
			<view class='rule'>
				<view class='rule-title-box'>
					<view class='rule-line'></view>
					<view class='rule-title'>享宝温馨提示</view>
				</view>
				<view class='rule-content'>
					<uParse :content="ruleData"></uParse>
				</view>
			</view>
		</view>
		<!-- 详情 -->
		<view class='content bg_style'>
			<view class='content-line'>
				<view :class="content_index == 1 ? 'line-current' : ''" @tap='content_click' data-index="1">珠宝介绍</view>
				<view :class="content_index == 2 ? 'line-current' : ''" @tap='content_click' data-index="2">售后服务</view>
			</view>
			<view class='content-box'>
				<view style='line-height:0px' class="line-current-hide" :class="content_index == 1 ? 'line-current-box' : ''">
					<uParse :content="content" @preview="preview"/>
				</view>
				<view class="line-current-hide" :class="content_index == 2 ? 'line-current-box' : ''">
					<view class="server_desc" v-for="(item, index) in show_data.refund_service" :key="index">
						<view class="server_num">{{index}}、</view>
						<view class="server_text">{{item}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class='footer_box'>
			<view class="li" @tap="collect_click">
				<image :src="collect_img" mode="widthFix"></image>
				<text class='collect_text'>收藏</text>
			</view>
			<view class='li'>
				<!-- #ifdef APP-PLUS -->
				<button open-type='feedback'>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button open-type='contact'>
				<!-- #endif -->
					<image style="display: block;" src='../../static/icons/jewel/customer.png' mode="widthFix"></image>
				客服</button>
			</view>
			<view data-type="2" data-show-agreement="1" data-agree_id="0" class="buy_now g1" :class="[isNoBuy?'no_buy_now':'']" @tap="push_order_alert">
				<image src="../../static/icons/jewel/buy.png" mode="widthFix"></image>享用
			</view>
		</view>
		
		<view class="warm_prompt" :style="{'display': show_agreement == '1' ? 'block' : 'none'}">
			<view class="modal"></view>
			<view class="promt_content">
				<image class="content_img" src="../../static/images/jewel/warm_prompt.png"/>
				<image id="agree" @tap='push_order' data-agree_id="1" src="../../static/images/jewel/agree_btn.png"/>
				<image id="no_agree" @tap='push_order' data-show-agreement="0" data-agree_id="0" src="../../static/images/jewel/no_agree_btn.png"/>
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<!-- 弹框蒙版 -->
			<view class="u-popup-mask" v-if="bIsShowMask" @tap="closePopup"></view>
			<!-- 分享弹框 -->
			<view class="g-popup-share" :class="[bIsShowMask ? 'z-show' : '']">
				<view class="g-share-type">
					<button @tap="share('weixin','WXSceneSession')">
						<image src="../../static/icons/wxpay.png" mode="widthFix"></image>
						<view>微信好友</view>
					</button>
					<button @tap="share('weixin','WXSenceTimeline')">
						<image src="../../static/icons/weixin_friend.png" mode="widthFix"></image>
						<view>朋友圏</view>
					</button>
				</view>
				<button class="u-share-cancel" @tap="closePopup">取消</button>
			</view>
		<!-- #endif -->
		
		<!-- 弹框蒙版 -->
		<view class="u-popup-mask" v-if="bIsShowAttr" @tap="show_attr" ></view>
		<view class="g-popup-attr" :class="[bIsShowAttr ? 'z-show' : '']">
			<view class="u-popup-title">
				珠宝参数
			</view>
			<view class="u-popup-attr-content">
				<view class="u-popup-one" v-for="(item, index) in content_attribute" :key="index" v-if="item.name != null">
					<view class="u-popu-key">
						{{item.name}}
					</view>
					<view class="u-popu-value">
						{{item.items}}
					</view>
				</view>
				<view class="u-popup-hide" @tap="show_attr">
					完成
				</view>
			</view>
		</view>
		<!-- 修改价钱 -->
		<view class="u-popup-mask" v-if="showRevisePrice" @tap="show_revisePrice" ></view>
		<view class="g-popup-buy" :class="[showRevisePrice? 'z-show' : '']">
		    <view class="g-buy-info">
		        <image :src="show_data.share_img"></image>
		        <view class="g-price">￥<text>{{goods_price}}</text></view>
		        <view>已选数量：<text>{{buy_number}}</text></view>
		    </view>
			<view class="product-param-price">
				<text class="buy-param-name">输入价格</text>
				<view class="reset-price">
					<text class="rmb">¥</text>
					<input class="buy-param-input" type="number" :value="pay_money" @blur="revisePrice" placeholder="请输入价格" placeholder-class="buy-placeholder" />
				</view>
			</view>
		    <view class="product-param-buy">
		    	<text class="buy-param-name">数量</text>
		    	<view class="buy-param-val-wrap">
		    		<input class="product-number" type="number" v-model="buy_number" @blur="numberInput" />
		    		<view class="plus product-param-btn" @tap='handle_buy_number' data-act='add'>+</view>
		    		<view class="mius product-param-btn" @tap='handle_buy_number' data-act='reduce'>-</view>
		    	</view>
		    </view>
			<view class="u-popup-buy">
				<button class="buyall" hover-class="none">享宝(¥{{sytotalPrice}})</button>
				<button hover-class="none" @tap="toggle_agreement" data-state="0" data data-sign="protocol" data-type="2" data-show-agreement="1" data-agree_id="0" :class="pay_money == 0||pay_money == ''?'noBuy':''">立即享用</button>
			</view>
		    <button class="u-buy-close" @tap="show_revisePrice">
		        <close size="50" color="#a4a4a4"></close>
		    </button>
		</view>
		
		<view class="u-popup-mask" v-if="showAgreement" @tap="hide_agreement" ></view>
		<view class="g-popup-agreement" :class="[showAgreement? 'z-show' : '']">
			<scroll-view scroll-y class="agreement-scroll">
				<jyf-parser :html="agreementData" ref="article"></jyf-parser>
			</scroll-view>
			<view class="agreement-btn">
				<view @tap="hide_agreement">取消</view>
				<view class="agree" @tap="toggle_agreement" data-state="1">同意</view>
			</view>
		</view>
		
		<view class="m-loading" v-if="bIsShowLoading">
		    <image src="../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
	</view>
</template>
<script>
	import henglang from '@/common/common_zb.js';
	import uParse from '@/components/uParse/src/wxParse.vue';
	export default {
		data() {
			return {
				goods_id: 0,	// 产品id
				show_data: [],	//　产品的信息
				goods_price: 0,	// 当前价格
				choose_item_id: [],	// 选中的规格id
				attribute: [], 	// 规格数据
				buy_number: 1,	// 购买件数
				goods_number: 0, // 商品库存
				// sunhao: 0, //	损耗费
				content_index: 1,	// 显示内容索引（珠宝介绍、规格参数、售后服务）
				event_type: '',	// 下单点击事件
				show_agreement: 0,	// 默认隐藏差价框
				bIsShowLoading: false,
				collect_img: '../../static/icons/jewel/collection-o.png',	// 收藏图标默认不选中
				content: '',
				content_attribute:[],
				bIsShowMask: false,
				bIsShowAttr: false,
				isNoBuy: false,
				seller: []	,//	商家信息
				weight_type: 0,
				video_autoplay: true	,// 是否自动滚动轮播
				interval:1500,
				showRevisePrice: false,
				reg_way:false,
				pay_money_way:1,
				pay_money:'',
				sytotalPrice:0,
				ruleData:'',
				agreementData:'',
				showAgreement: false,
				isAgree: uni.getStorageSync('buyAgreementData').isAgreemented,
				www:uni.getStorageSync('buyAgreementData'),
				record_id:''
			}
		},
		components: {
			uParse
		},
		onLoad(options) {
			let that = this;
			let url = ''
			that.goods_id = options.goods_id;
			that.record_id = options.record_id
			that.bIsShowLoading = true;
			henglang.get('goods/getGoodsBaseInfo', {goods_id: options.goods_id}, false,function(res){
				let code = res.data.code;
				let show_data = res.data.data;
				// #ifdef APP-PLUS
					that.seller = show_data.seller;
				// #endif
				if(code == '-1') {
					henglang.showToast(res.data.msg, 1500);
					that.bIsShowLoading = false;
					setTimeout(function (){
						uni.navigateBack();
					}, 1000)
					return;
				}
				that.goods_number = show_data.store_count;
				that.pay_money_way = show_data.pay_money_way;
				that.collect_img = show_data.collect == '1' ? '../../static/icons/jewel/collection-o.png' : '../../static/icons/jewel/collection.png';
				that.event_type = show_data.show_agreement_click;	// 如果是1、弹出差价展示框
				that.weight_type = show_data.parent_id == '39' ? '0' : '1';
				if(show_data.goods_spec_price.length == '0') {
					that.goods_price = show_data.shop_price;
				}else{
					that.goods_price = show_data.current_spec.shop_price;
					that.goods_number = show_data.current_spec.store_count;
					that.attribute = show_data.attribute;
					that.choose_item_id = show_data.current_spec.item_ids;	// 默认选择的规格id
				}
				that.show_data = show_data;
				henglang.get('goods/getGoodsContentAttr',{goods_id: that.goods_id},false,function(res){
					that.content = res.data.data.goods_content;
					that.content_attribute = res.data.data.goods_attr;
				});
				that.bIsShowLoading = false;
				if(that.goods_number == 0){
					that.isNoBuy = true
				} 
				that.sytotalPrice = (that.goods_price * that.buy_number).toFixed(2)
				that.pay_money = that.goods_price
				//获取温馨提示
				if(that.show_data.is_daiyan_zone == 1){
					url = 'Goods/baokuan_rule'
				}else{
					url = 'Goods/pupong_rule'
				}
				henglang.get(url,{}, false, function(res){
					if(res.data.code == 0){
						that.ruleData = res.data.data.view;
					}
				})
				
			})
			if(!that.isAgree){
				henglang.get('activity/getView',{id: uni.getStorageSync('buyAgreementData').buy_agreement_article},false,function(res){
					if(res.data.code == 0){
						that.agreementData = res.data.data.content;
					}else{
						that.agreementData = res.data.msg;
					}
				});
			}
		},
		onReady() {
			let that = this
			uni.getSystemInfo({
			    success(res) {
			        that.reg_way = res.platform == 'android' ? true : false;
			    }
			});
		},
		methods: {
			preview(){},
			ended(){
				this.interval = 2500
			},
			// 显示参数弹框
			show_attr(){
				this.bIsShowAttr = this.bIsShowAttr?false:true;
			},
			// 选择规格
			choose_item(e){
				let item_id = e.currentTarget.dataset.itemId;
				let index = e.currentTarget.dataset.index;
				let key = e.currentTarget.dataset.key;
				let choose_item_id = [];
				let that = this;
				choose_item_id[key] = item_id;
				if(choose_item_id[key] != that.choose_item_id[key]) {	// 选中的不再加载
					let attribute = that.attribute;
					that.choose_item_id[key] = item_id;
					that.bIsShowLoading = true;
					henglang.get('goods/get_product_info', {choose_item_id: that.choose_item_id.join('_'), goods_id: that.goods_id}, false, function(res){
						let product_data = res.data.data;
						that.goods_price = product_data.shop_price;
						that.pay_money = that.goods_price;
						that.goods_number = product_data.store_count;
						that.sytotalPrice = that.goods_price;
						that.sunhao = product_data.sunhao;
						for (let i in attribute) {
							if(i == index) {
								for (let j in attribute[i]) {
									attribute[i][j]['selected'] = '';
								}
							}
						}
						attribute[index][item_id]['selected'] = 'attr-value-current';
						that.attribute = attribute;
						that.bIsShowLoading = false;
					})
				}
			},
			// 加减购买件数
			handle_buy_number(e){
				let that = this
				let buy_number = that.buy_number;
				let act = e.currentTarget.dataset.act;
				let goods_number = that.goods_number;
				if(act == 'add'){ // 增加件数
				  buy_number++;
				  if (buy_number > goods_number){
					buy_number-=1;
				  }
				}else{  // 减少
				  if (buy_number > 1) buy_number--;
				}
				that.buy_number = buy_number;
				if(that.showRevisePrice){
					that.sytotalPrice = (that.buy_number * that.pay_money).toFixed(2)
				}
			},
			// 享用
			push_order(e){
				let that = this;
				let agree_id = e.currentTarget.dataset.agree_id;	// 未点击 差价框 我愿意按钮
				if(that.pay_money == 0 || that.pay_money == '') return false
				if(that.event_type == '1' && agree_id == 0) {
					let show_agreement = e.currentTarget.dataset.showAgreement;
					that.show_agreement = show_agreement;
				}else{
					let data = {choose_item_id: that.choose_item_id, goods_id: that.goods_id, buy_number: that.buy_number,pay_money: that.pay_money,record_id:that.record_id};
					that.bIsShowLoading = true;
					henglang.post('order/push_order', data, true, function(res){
						let res_data = res.data;
						let code = res_data.code;
						if(code == '-1') {
							henglang.showToast(res_data.msg)
						}else{
							uni.navigateTo({
							    url: res_data.data.url
							})
						}
					})
					that.bIsShowLoading = false;
					that.show_agreement = 0;
				}
			},
			// 选择显示的内容
			content_click(e){
				let index = e.currentTarget.dataset.index;
				this.content_index = index;
			},
			// 添加收藏
			collect_click(){
				let that = this;
				henglang.get('goods/add_coll', {goods_id: this.goods_id}, false, function (res){
					let resdata = res.data;
					if(resdata.code == '0') {
						that.collect_img = resdata.data == '1' ? '../../static/icons/jewel/collection-o.png' : '../../static/icons/jewel/collection.png';
					}
					henglang.showToast(resdata.msg, 1500);
				})
			},
			closePopup(){
				this.bIsShowMask = false;
			},
			share(type, wx = '') { // 调用分享
				let that = this
				let userInfo = uni.getStorageSync('userInfo')
				this.bIsShowLoading = true;
				uni.share({
			        provider: type,
			        scene: wx,
			        type: 0,
			        href: that.show_data.share_url + '&share_pid=' + userInfo.member_id,
			        title: that.show_data.share_title,
			        summary: that.show_data.goods_name,
			        imageUrl: that.show_data.share_img,
			        success: function(res) {
						that.bIsShowLoading = false
					},
			        fail: function(err) {
						that.bIsShowLoading = false
					}
			    });
				setTimeout(() => {
					this.bIsShowLoading = false;
				}, 3000)
			},
			// 显示修改价钱
			show_revisePrice(){
				this.showRevisePrice = !this.showRevisePrice
			},
			revisePrice(e){
				let that = this
				that.pay_money = e.detail.value || e.target.value
				if(that.pay_money == '' || that.pay_money == 0){
					henglang.showToast('请输入正确的价格')
				}
				that.sytotalPrice = (that.buy_number * that.pay_money).toFixed(2)
			},
			push_order_alert(e){
				let that = this
				if(that.goods_number == 0){
					that.isNoBuy = true
					return false
				}else if(that.pay_money_way == 1){
					that.showRevisePrice = true
				}else if(!that.isAgree){
					that.showAgreement = true
				}else{
					that.push_order(e)
				}
				
			},
			numberInput(e){
				let that = this
				let value = e.detail.value || e.target.value
				if(value == 0 || value == ''){
					that.buy_number = 1
				}else if(parseInt(value) > parseInt(that.goods_number)){
					that.buy_number = that.goods_number
				}
				that.sytotalPrice = (that.buy_number * that.pay_money).toFixed(2)
			},
			hide_agreement(){
				this.showAgreement = false
			},
			//检测是否同意过购买协议
			toggle_agreement(e){
				let that = this
				if(e.target.dataset.state == 0|| e.currentTarget.dataset.state == 0){
					if(that.isAgree){
						that.push_order(e)
					}else{
						that.showAgreement = true
					}
				}else{
					uni.setStorage({
						key:'buyAgreementData',
						data:{
							buy_agreement_article:uni.getStorageSync('buyAgreementData').buy_agreement_article,
							isAgreemented:true
						}
					})
					that.isAgree = true
					that.push_order(e)
					that.hide_agreement()
				}
			},
		},
		onNavigationBarButtonTap({index}) {
		    if (index == 0) {
		        this.bIsShowMask = true;
		    }
		},
		onShareAppMessage(res) {
			// #ifdef MP-WEIXIN
				if (res.from === 'menu') {// 来自页面内分享按钮
				}
				return {
				  title: this.show_data.goods_name,
				  path: '/pages/jewel/goods/show?goods_id=' + this.goods_id,
				  desc: this.show_data.share_desc
				}
			// #endif
		}
	}
</script>

<style lang="scss">
	.page {
		width: 750rpx;
		height: auto;
		padding-bottom: 100rpx;
		background: #f4f4f4;
		overflow-x: hidden;
	}

	.clear {
		clear: both;
		/*清除浮动  */
	}
	.crosswise {
		width: 720rpx;
		height: 2rpx;
		background: #e9e9e9;
	}
	.weight_type{
		color: #b1b1b1;
	}
	.weight_css{
		color: #fe6361;
		margin-left: 20rpx;
	}
	
	.grayBg {
		width: 750rpx;
		height: 15rpx;
		background: #efefef;
	}

	.stock {
		color: #b1b1b1;
		position: absolute;
		right: 0;
		top: 15rpx;
		font-size: 24rpx;
	}

	/*商品详情滚动图  */
	.swiper-box {
		border-top: 1rpx solid #ccc;
		height: 750rpx;
		border-bottom: 1rpx solid #ccc;
		background-color: #F4F4F4;
		
	}
	.swiper-box swiper-item {
		height: 750rpx;
		position: relative;
	}
	.showVideo{
		position: absolute;
		top: 0;
		left: 0;
	}
	.good-text {
		height: auto;
		width: 100%;
		overflow: hidden;
		padding-bottom: 15rpx;
	}

	.good-text-box {
		overflow: hidden;
		width: 95%;
		margin: 0 auto;
		margin-top: 24rpx;
	}

	.good_ziying {
		font-size: 21rpx;
		background: #fd6361;
		width: 54rpx;
		height: 30rpx;
		border-radius: 4rpx;
		text-align: center;
		line-height: 30rpx;
		color: #fff;
		float: left;
		margin-top: 4rpx;
		margin-right: 8rpx;
	}

	.good-name {
		font-size: 27rpx;
		width: auto;
		margin-bottom: 32rpx;
		line-height: 40rpx;
	}

	.good-price-box {
		color: #fd6361
	}

	.good-price-l {
		float: left;
		width: 239rpx
	}

	.good-price-text {
		clear: both;
		font-size: 24rpx;
		float: left;
		margin-right: 6rpx;
		position: relative;
		top: 6rpx;
	}

	.good-price {
		float: left;
		font-size: 32rpx;
	}

	.good-price-r {
		float: right;
		color: #ccc;
		font-size: 27rpx;
	}

	.good-attr-box {
		width: 100%;
		height: auto;
	}

	.good-attr-content {
		width: 95%;
		height: auto;
		overflow: hidden;
		margin: 0 auto;
	}

	.attr-yixuan {
		float: left;
		margin-right: 23rpx;
	}

	.attr-select {
		float: left
	}

	.good-attr-select {
		height: 80rpx;
		font-size: 29rpx;
		line-height: 80rpx;
		float: left;
		width: 100%;
	}

	.good-attr-select-none-border {
		border-bottom: none
	}
	
	/* 商家 */
	.store-container{
		width: 95%;
		margin: 0 auto;
	}
	.store-head{
		height: 110rpx;
		overflow: hidden;
	}
	.store-l{
		float: left;
		height: 100%;
	}
	.store-l .store-logo{
		height: 110rpx;
		width: 110rpx;
		float: left;
		margin-right: 20rpx;
	}
	.store-info{
		float: left;
		height: 100%;
	}
	.store-name{
		font-size: 32rpx;
		margin-top: 30rpx;
	}
	.store-type{
		background: #fe6361;
		width: 143rpx;
		height: 30rpx;
		color: #fff;
		line-height: 30rpx;
		text-align: center;
		font-size: 22rpx;
		border-radius: 3px;
		margin-top: 4rpx;
	}
	.store-r{
		height: 54rpx;
		border-radius: 40rpx;
		border: 2rpx solid #fe6361;
		float: right;
		width: 175rpx;
		line-height: 54rpx;
		text-align: center;
		color: #fe6361;
		margin-top: 30rpx;
	}
	.store-goods{
		height: 88rpx;
		line-height: 124rpx;
		width: 80%;
		margin: 0 auto;
	}
	.all-goods{
		width: 50%;
		float: left;
	}
	.all-goods:last-child{
		float: right;
		text-align: right;
	}
	.store-text{
		color: #949494;
		font-size: 26rpx;
		margin-right: 26rpx;
	}
	.store-num{
		font-weight: bold;
	}

	.op-icon {
		float: right;
		width: 50rpx;
		height: 50rpx;
	}

	.op-icon image {
		width: 100%;
		height: 100%;
		margin-top: 18rpx;
		-webkit-transform: rotate(270deg);
	}

	.op-icon image.rotate {
		-webkit-transform: rotate(87deg);
	}

	.good-attr-show {
		display: none !important
	}

	.good-attr {
		width: 100%;
		height: auto;
		overflow: hidden;
		padding-bottom: 30rpx;
		border-top: 1rpx solid #ddd
	}

	.good-attr-set {
		overflow: hidden;
		margin-top: 30rpx;
	}

	.attr-key {
		color: #9a9a9a;
		font-size: 25rpx;
		float: left;
		margin-right: 29rpx;
		margin-top: 10rpx;
		overflow: hidden;
		height: auto;
		width: auto;
	}

	.attr-set {
		overflow: hidden
	}

	.attr-value {
		color: #000;
		font-size: 25rpx;
		float: left;
		background: #f3f2f8;
		width: 100rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		border-radius: 4px;
		margin-right: 24rpx;
		margin-bottom: 20rpx;
	}

	.attr-value-current {
		color: #fff;
		background: #fd6361
	}

	.buy-count {
		width: 210rpx;
		height: 58rpx;
		border: 1rpx solid #999;
		overflow: hidden;
		border-radius: 4px
	}

	.buy-num {
		width: 88rpx;
		float: left;
		text-align: center;
		height: 100%;
	}

	.buy-num input {
		width: 100%;
		line-height: 72rpx;
		font-size: 28rpx;
		height: 100%;
		vertical-align: middle
	}

	.buy-reduce,
	.buy-add {
		width: 59rpx;
		height: 100%;
		float: left;
		text-align: center;
		line-height: 58rpx;
	}

	.buy-reduce {
		border-right: 1px solid #999
	}

	.buy-add {
		float: right;
		border-left: 1px solid #999
	}

	.suhao {
		font-size: 26rpx;
		text-indent: 22rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: #999;
	}

	.sunhao_price {
		color: #fd6361;
		display: inline-block;
		font-size: 32rpx;
		position: relative;
		left: -40rpx;
	}

	.sunhao_fuhao {
		display: inline-block;
		font-size: 25rpx;
	}

	.bg_style {
		background: #fff;
		margin-bottom: 30rpx;
	}

	.merchant {
		height: 275rpx;
		width: 100%;
		overflow: hidden;
	}

	.merchant_box {
		width: 95%;
		height: 100%;
		overflow: hidden;
		margin: 0 auto;
	}

	.merchant_info {
		height: 82rpx;
		width: 100%;
		overflow: hidden;
		display: flex;
		align-items: center;
	}

	.merchant_info view {
		float: left;
	}

	.mer_img {
		height: 90rpx;
		width: 90rpx;
		border-radius: 5px;
		margin-right: 20rpx;
		overflow: hidden;
	}

	.mer_img image {
		width: 100%;
	}

	.mer_title {
		margin-right: 14rpx;
		font-size: 32rpx;
	}

	.mer_ziying {
		font-size: 24rpx;
		color: #fff;
		background: #fd6361;
		width: auto;
		height: 32rpx;
		line-height: 32rpx;
		padding: 0rpx 18rpx;
		border-radius: 4rpx;
	}

	.merchant_extra {
		height: 72rpx;
		width: 100%;
		overflow: hidden;
		margin-top: 30rpx;
	}

	.people_count {
		width: 49%;
		height: 100%;
		text-align: center;
		float: left
	}

	.count {
		font-size: 26rpx;
	}

	.count-text {
		font-size: 26rpx;
		color: #949494;
	}

	.mer_lease {
		border-right: none
	}

	.go_mer {
		display: inline-block;
		border: 1rpx solid #fe6361;
		border-radius: 100rpx;
		font-size: 26rpx;
		color: #fe6361;
		position: absolute;
		top: 46rpx;
		right: 20rpx;
		padding: 4rpx 20rpx;
	}
	/* 参数 */
	.attr_content{
		margin-top: 40rpx;
	}
	.goRight{
		width: 38rpx;
		height: 38rpx;
		float: right;
	}
	.attr_data{
		width: 120px;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		float: left;
	}
	.attr_data_one{
		color: #666;
	}

	.comment {
		height: 100%;
		width: 100%;
		overflow: hidden
	}
	.z-show {
	    transform: translateY(0) !important;
	}
	/* 弹出框参数 */
	.g-popup-attr{
		background: #fff;
		position: fixed;
		left: 0upx;
		bottom: 0upx;
		z-index: 99;
		height: 80%;
		width: 100%;
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		transform: translateY(100%);
		transition: .3s;
	}
	.u-popup-title{
		text-align: center;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
	.u-popup-attr-content{
		width: 90%;
		margin: 0 auto;
		height: 100vh;
	}
	.u-popup-one{
		border-bottom: 2rpx solid #eee;
		min-height: 82rpx;
		overflow-y:auto;
	}
	.u-popup-one:last-child{
		border-bottom: none;
	}
	.u-popu-key{
		width: 40%;
		float: left;
		color: #8e8e8e;
		line-height: 82rpx;
	}
	.u-popu-value{
		width: 60%;
		float: left;
		color: #545454;
		margin: 27rpx 0 27rpx 0rpx;
	}
	.u-popup-hide{
		width: 80%;
		height: 80rpx;
		color: #fff;
		text-align: center;
		border-radius: 40rpx;
		line-height: 80rpx;
		position: absolute;
		bottom: 30rpx;
		left: 10%;
		background: red;
	}
	.comment-box {
		width: 95%;
		margin: 0 auto;
		height: 100%
	}

	.comment-hea {
		height: 81rpx;
		line-height: 81rpx;
		margin-bottom: 20rpx;
		border-bottom: 1px solid #dcdcdc;
		text-align: center;
	}

	.comment-text {
		font-size: 28rpx;
	}

	.comment-branch {
		font-size: 28rpx;
		float: right
	}

	.comment-score {
		color: #fd6361;
		float: left;
		margin-right: 5rpx;
	}

	.comment-list {
		height: 100%;
		width: 100%;
		overflow: hidden;
	}

	.comment-list view {
		height: 33%;
		line-height: 78rpx;
	}

	.comment-nickname image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 100rpx;
		margin-right: 20px;
	}

	.comment-nickname {
		font-size: 22rpx;
		display: flex;
		align-items: center;
	}

	.comment-nickname .nickname {
		float: left;
		font-size: 26rpx;
	}

	.comment-img {
		height: 160rpx;
		width: 100%;
		overflow: hidden;
	}

	.comment-img-box {
		position: relative;
		width: 160rpx;
		height: 160rpx;
		overflow: hidden;
		float: left;
		margin-right: 10rpx;
	}

	.comment-go-more {
		position: absolute;
		top: 0rpx;
		width: 160rpx;
		height: 160rpx !important;
		background: #000;
		opacity: 0.5;
		font-size: 26rpx;
		color: #fff;
		line-height: 160rpx !important;
		text-align: center
	}
	.comment-img image {
		height: 160rpx;
		width: 160rpx;
		float: left;
	}
	.comment-content {
		font-size: 25rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%
	}
	.comment-date {
		font-size: 22rpx;
		color: #999
	}
	.comm_stars {
		float: left;
		position: relative;
		top: 4rpx;
		left: 25rpx;
		margin-right: 5rpx;
	}
	.comm_stars image {
		width: 25rpx;
		height: 24rpx;
	}
	.comment-more-box {
		font-size: 24rpx;
		text-align: center;
	}
	.comment-count {
		float: left;
		color: #acacac
	}
	.comment-more {
		display: inline-block;
		color: #fe6361;
		border: 1px solid #fe6361;
		padding: 10rpx 20rpx;
		font-size: 26rpx;
		border-radius: 100rpx;
		margin-bottom: 10rpx;
	}
	.more-text {
		float: left
	}
	.comment-more image {
		height: 50rpx;
		width: 50rpx;
		position: relative;
		top: 18rpx;
	}
	.content-line {
		height: 88rpx;
		border-bottom: 1px solid #ddd
	}
	.content-line view {
		float: left;
		width: 50%;
		font-size: 26rpx;
		line-height: 88rpx;
		text-align: center;
		height: 84rpx;
		color: #282828;
		position: relative;
	}

	.content-line .line-current {
		color: #fd6361
	}

	.content-line .line-current::after {
		content: '';
		display: block;
		width: 54rpx;
		height: 4rpx;
		background: #fe6361;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.content-box {
		width: 100%;
		height: 100%;
		overflow: hidden
	}
	.content-box .html-cont img{
		width: 100% !important;
	}
	/* 售后服务 */
	.server_desc{
		line-height: 64rpx;
		margin-left: 20rpx;
	}
	.server_desc{
		clear: both;
		width: 100%;
	}
	.server_num{
		float: left;
		height: 100%;
		width: 5%;
	}
	.server_text{
		float: left;
		width: 92%;
	}
	/* 售后服务 */
	.item_name{
		margin-right: 20rpx;
	}

	.line-current-hide {
		display: none
	}

	.line-current-box {
		display: block !important
	}

	.goods_attr .attr-li {
		height: 68rpx;
		line-height: 68rpx;
		float: left;
		padding-left: 16rpx;
		font-size: 24rpx;
	}

	.goods_attr .attr-li view {
		float: left
	}

	.footer_box {
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		margin: 0 auto;
		opacity: 1;
		z-index: 9;
		display: flex;
		color: #767676;
		text-align: center;
		font-size: 24rpx;
	}

	.footer_box view {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		box-sizing: border-box;
	}

	.footer_box image {
		width: 36rpx;
		vertical-align: middle;
	}

	.goods-slogan {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		background: #fd6361;
		width: 120rpx;
		height: 120rpx;
		border-radius: 100rpx;
		font-size: 28rpx;
		position: absolute;
		top: 10px;
		right: 10px;
		text-align: center;
	}

	.footer_box .li {
		width: 120rpx;
	}

	.footer_box .li image {
		width: 44rpx;
		margin-bottom: 4rpx;
	}
	
	.footer_box .buy_now {
		flex: 1;
		background: linear-gradient(to right, #f3587c, #ff7d5d);
		font-size: 32rpx;
		color: #fff;
		flex-direction: row;
		position: relative;
	}
	.footer_box .no_buy_now{
		background: #cccccc;
	}

	.buy_now image {
		width: 65rpx;
		margin-right: 10rpx;
	}

	.product-info-wrap {
		padding: 20rpx;
	}

	.product-name {
		display: -webkit-box;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 32rpx;
	}

	.product-price-wrap {
		margin: 20rpx 0 20rpx 0;
		font-size: 26rpx;
		color: #fe6361;
		position: relative;
	}

	.price {
		font-size: 40rpx;
		font-weight: bold;
		color: #fe6361;
	}

	.slogan {
		color: #fff;
		background: #fe6361;
		border-radius: 100rpx;
		padding: 5rpx 16rpx;
		margin-left: 20rpx;
	}

	.product-info2 {
		font-size: 24rpx;
		color: #b1b1b1;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.rmb {
		font-size: 24rpx;
		color: #fe6361;
	}

	.area-container {
		width: 90%;
		margin: 0 auto 20rpx auto;
		border-radius: 5px;
		background: #ffffff;
		padding: 20rpx;
		position: relative;
	}

	.product-param-item {
		display: flex;
		margin-bottom: 20rpx;
		align-items: flex-start;
	}

	.product-param-name {
		color: #b1b1b1;
		font-size: 26rpx;
		min-width: 110rpx;
		text-align: center;
		margin-right: 20rpx;
	}

	.product-param-val-wrap {
		flex: 1;
		position: relative;
	}

	.product-param-val {
		color: #fe6361;
		border: 1px solid #fe6361;
		border-radius: 5px;
		padding: 0 10rpx;
		margin: 0px 20rpx 20rpx 0px;
		font-size: 30rpx;
		display: inline-block;
		height: 52rpx;
		line-height: 52rpx;
	}

	.attr-value-current {
		color: #fff;
		background: #fe6361;
	}

	.product-number {
		border: 1px solid #fe6361;
		border-radius: 100rpx;
		text-align: center;
		width: 190rpx;
		font-size: 24rpx;
		color: #fe6361;
		height: 46rpx;
		min-height: 0;
	}

	.product-param-btn {
		font-weight: bold;
		font-size: 32rpx;
		border-radius: 100rpx;
		background: #fe6361;
		color: #fff;
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		line-height: 46rpx;
		position: absolute;
		z-index: 9;
	}

	.mius {
		left: 0;
		top: 0;
	}

	.plus {
		left: 194rpx;
		top: 0;
		transform: translateX(-100%);
	}

	/** 珠宝规则 **/
	.rule-title-box {
		margin-bottom: 10rpx
	}

	.rule-line {
		width: 6rpx;
		height: 28rpx;
		background: #fe6361;
		float: left;
		margin-right: 17rpx;
	}

	.rule-title {
		margin-top: 10rpx;
		font-size: 26rpx;
		color: #fe6361;
		line-height: 32rpx
	}

	.rule-content {
		height: 100%;
		width: 100%;
		overflow: hidden
	}

	.rule-content-li {
		font-size: 24rpx;
		color: #808080;
		line-height: 50rpx;
	}

	.rule-point {
		width: 13rpx;
		height: 13rpx;
		border: 1rpx solid #fe6361;
		border-radius: 20rpx;
		float: left;
		overflow: hidden;
		margin-top: 18rpx;
		margin-right: 15rpx;
	}

	/** 有得退活动弹框 **/
	.youdetui_activity_bg {
		background: rgba(0, 0, 0, 0.3);
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		width: 100%;
		height: 100vh;
		z-index: 9;
		overflow: hidden
	}

	.ydt_activity {
		position: absolute;
		top: 18%;
		z-index: 10;
		width: 532rpx;
		height: 609rpx;
		left: 15%;
	}

	.ydt_activity_float {
		position: fixed;
		right: 0px;
		top: 70%;
		z-index: 10
	}

	.ydt_activity_float image {
		width: 180rpx;
		height: 200rpx
	}

	/** 温馨提示 **/
	.warm_prompt {
		display: none;
	}

	.warm_prompt .modal {
		width: 100%;
		height: 100vh;
		background: #000;
		opacity: 0.5;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9
	}

	.promt_content {
		width: 85%;
		height: 50%;
		position: fixed;
		top: 20%;
		left: 7.5%;
		z-index: 10;
		/*background: #fff;*/
	}

	#agree {
		width: 172rpx;
		height: 52rpx;
		position: fixed;
		top: 65%;
		left: 37%;
	}

	#no_agree {
		width: 50rpx;
		height: 50rpx;
		position: fixed;
		top: 29%;
		right: 13%;
	}

	.warm_prompt .content_img {
		width: 100%;
		height: 100%;
	}

	.swiper-container {
		z-index: 0 !important;
	}
	.u-popup-mask {
	    position: fixed;
	    left: 0;
	    top: 0;
	    width: 100vw;
	    height: 100vh;
	    background: rgba(0, 0, 0, .5);
	    z-index: 10;
	}
	.g-popup-share {
	    position: fixed;
	    left: 0;
	    bottom: 0;
	    width: 100%;
	    background: #fff;
	    z-index: 11;
		transform: translateY(100%);
		transition: .3s;
	}
	
	.g-popup-share .g-share-type {
	    display: flex;
	    padding: 15px 0;
	}
	
	.g-popup-share .g-share-type button {
	    flex: 1;
	    text-align: center;
	}
	
	.g-popup-share .g-share-type image {
	    width: 75upx;
		height: 75upx;
	}
	
	.g-popup-share .u-share-cancel {
	    background: #a4a4a4;
	    padding: 10px 0;
	    color: #fff;
	
	}
	.shop-store .logo{
		width: 110rpx;
		height: 110rpx;
		margin-right: 18rpx;
		display: block;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.shop-store .info{
		display: flex;
		align-items: center;
	}
	.shop-store .info .name{
		color: #111111;
		font-size: 32rpx;
		display: block;
	}
	.shop-store .info .red{
		color: #ffffff;
		font-size: 22rpx;
		background: #fe6361;
		border-radius: 3px;
		text-align: center;
		display: inline-block;
		padding: 0 10rpx;
		line-height: 30rpx;
	}
	.shop-store .top{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 10rpx;
	}
	.shop-store .go-btn{
		color: #fe6361;
		font-size: 26rpx;
		text-align: center;
		border-radius: 50px;
		border: 1px solid #fe6361;
		line-height: 50rpx;
		padding: 0 30rpx;
	}
	.shop-store .bottom{
		display: flex;
		align-items: center;
		padding: 30rpx 0 10rpx 0;
	}
	.shop-store .bottom view{
		color: #949494;
		font-size: 26rpx;
		flex:1;
		text-align: center;
	}
	.shop-store .bottom text{
		color: #111111;
		font-size: 30rpx;
		font-weight: bold;
		margin-left: 25rpx;
	}
	/* 购买弹框 */
	.g-popup-buy {
	    position: fixed;
	    left: 0;
	    bottom: 0;
	    width: 100%;
	    background: #fff;
	    z-index: 11;
	    padding: 10px;
	    box-sizing: border-box;
	    padding-bottom: 60px;
	    transform: translateY(150%);
	    transition: .3s;
		z-index: 51;
	}
	.g-popup-buy .g-number-select {
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: space-between;
		border: 1px solid #A4A4A4;
		border-radius: 10upx;
		position: relative;
	}
	.g-popup-buy .g-number-select > view {
	    color: #3e3e3e;
	    font-size: 42upx;
	    font-weight: bold;
		width: 90upx;
		height: 66upx;
		line-height: 66upx;
	}
	.g-popup-buy .g-number-select.ios > view {
		line-height: 60upx;
	}
	.g-popup-buy .g-number-select input {
	   width: 100upx;
	}
	.g-popup-buy .g-number-select:after{
		content: '';
		position: absolute;
		left: 90upx;
		top: 0;
		height: 66upx;
		background: #A4A4A4;
		width: 1px;
	}
	.g-popup-buy .g-number-select:before{
		content: '';
		position: absolute;
		right: 90upx;
		top: 0;
		height: 66upx;
		background: #A4A4A4;
		width: 1px;
	}
	.g-popup-buy .u-plus{
		color: #ffffff !important;
		position: relative;
		z-index: 1;
	}
	.g-popup-buy .u-plus:after{
		content: '';
		position: absolute;
		width: 94upx;
		height: 70upx;
		background: #d71311;
		top: -4upx;
		left: -4upx;
		z-index: -1;
		border-radius: 0 10upx 10upx 0;
	}
	.g-popup-buy .ios .u-plus:after{
		top: -2upx;
		left: -2upx;
	}
	.g-popup-buy .g-buy-number {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    margin-top: 40upx;
	}
	
	.g-buy-all{
		padding-top: 20upx;
		text-align: right;
	}
	
	.g-buy-info {
	    padding: 10px 0 60upx 292upx;
	    position: relative;
	}
	.g-buy-info .g-price{
		color: #fe6361;
	}
	.g-buy-info .g-price text {
	    font-size: 40upx;
		color: #fe6361;
	}
	
	.g-buy-info::after {
	    border-bottom: 1px solid #ccc;
	}
	
	.g-buy-info image {
	    width: 230upx;
	    height: 230upx;
	    padding: 5px;
	    background: #fff;
	    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
	    border-radius: 5px;
	    position: absolute;
	    top: 0;
	    left: 10px;
	    transform: translateY(-30%);
	}
	
	.g-buy-param {
	    margin: 10px 0;
	}
	
	.g-buy-param .u-param-item {
	    display: inline-block;
	    margin: 8px 0px 0 12px;
	    padding: 2px 6px;
	    border-radius: 3px;
	    background: #e9e9e9;
	    transition: .3s;
	}
	
	.g-buy-param .act {
	    color: #fff;
	    background: #d71311;
	}
	
	.g-param-wrap {
	    overflow: auto;
	    height: 40vh;
	}
	
	.u-popup-buy {
	    position: absolute;
	    left: 0;
	    bottom: 0;
	    width: 100%;
	    background: #fe6361;
	    color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.u-popup-buy button{
		flex: 1;
		padding: 15px 0;
	}
	.u-popup-buy button.buyall{
		background: #ffffff;
		color: #d71311;
		border-top: 2upx solid #d71311;
		border-bottom: 2upx solid #d71311;
	}
	.u-buy-close {
	    position: absolute;
	    z-index: 9;
	    top: 12px;
	    right: 12px;
	}
	.product-param-buy {
		display: flex;
		margin-bottom: 200rpx;
		align-items: center;
		justify-content: space-between;
	}
	.product-param-buy .buy-param-name{
		color: #3d3d3d;
		font-size: 28rpx;
	}
	.product-param-buy .buy-param-val-wrap{
		position: relative;
	}
	.product-param-price{
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding: 40rpx 0;
	}
	.product-param-price .rmb{
		color: #d71314;
		font-size: 28rpx;
		margin-left: 30rpx;
		margin-right: 4rpx;
	}
	.product-param-price .buy-param-input{
		color: #d71314;
		font-size: 38rpx;
		height: 30rpx;
		line-height: 30rpx;
		width: 200rpx;
		position: relative;
		margin-bottom: -4rpx;
	}
	.product-param-price .buy-param-input::after{
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background-color: #CCCCCC;
	}
	.product-param-price .reset-price{
		display: flex;
		align-items: flex-end;
	}
	.buy-placeholder{
		font-size: 30rpx;
	}
	.noBuy{
		background-color: #cccccc;
		color: #FFFFFF;
	}
	
	.g-popup-agreement{
		position: fixed;
		z-index: 52;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 90%;
		background-color: #FFFFFF;
		border-radius: 10px 10px 0 0;
		transform: translateY(100%);
		transition: .3s;
		.agreement-scroll{
			padding: 30rpx 20rpx 10rpx 20rpx;
			box-sizing: border-box;
			height: calc(100% - 100rpx);
		}
		.agreement-btn{
			position: fixed;
			z-index: 10;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #FFFFFF;
			z-index: 999;
			view{
				flex: 1;
				width: 50%;
				text-align: center;
				font-size: 32rpx;
			}
			.agree{
				background-color: #ea669f;
				color: #FFFFFF;
			}
		}
	}
</style>